<template>
  <div>
    <header id="panel" class="panel-cover" ref="panel">
        <div class="panel-main">
            <div class="panel-main__inner panel-inverted">
                <div class="panel-main__content">
                    <a href="#" title="Dmego Home" class="profilepic">
                        <img src="~assets/img/home/phoenix.jpg" width="80" alt="Dmego`s logo" class="js-avatar iUp show profilepic" />
                    </a>
                    <h1 class="panel-cover__title panel-title iUp">
                        <a href="#" title="Dmego Home">WPhoenixes</a>
                    </h1>
                    <p class="panel-cover__subtitle panel-subtitle iUp">Stay Hungry, Stay Foolish！</p>
                    <hr class="panel-cover__divider iUp" />
                    <p id="description" class="panel-cover__description iUp">{{ hitokoto_data.hitokoto }}
                        <br/>
                        <strong>-「 {{ hitokoto_data.from }} 」</strong>
                    </p>
                    <div class="navigation-wrapper iUp">
                        <div>
                            <nav class="cover-navigation cover-navigation--primary">
                                <ul class="navigation">
                                    <li class="navigation__item">
                                        <a href="" @click.prevent="route_redirect_replace('index')" class="blog-button">首页</a>
                                    </li>
                                    <li class="navigation__item">
                                        <a href="" class="blog-button" target="_blank">项目</a>
                                    </li>
                                    <li class="navigation__item">
                                        <a href="" class="blog-button" target="_blank">关于</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div class="iUp">
                            <nav class="cover-navigation navigation--social">
                                <ul class="navigation">
                                    <li class="navigation__item">
                                        <a href="https://github.com/wangfengfu" title="github" target="_blank">
                                            <i class='social iconfont icon-GitHub'></i>
                                            <span class="label">github</span>
                                        </a>
                                    </li>
                                    <li class="navigation__item">
                                        <a href="https://blog.csdn.net/qq_33458131" title="cnblogs" target="_blank">
                                            <i class='social iconfont icon-wap_toolbar_csdn'></i>
                                            <span class="label">csdn</span>
                                        </a>
                                    </li>
                                    <li class="navigation__item">
                                        <a href="mailto:1229256029@qq.com" title="email">
                                            <i class='social iconfont icon-email'></i>
                                            <span class="label">email</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-cover--overlay cover-slate"></div>
        </div>
        <div class="remark iUp">
            <p class="power">Powered By 
                <a href="" target="_blank"> WFF </a>
            </p>
        </div>
    </header>
  </div>
</template>

<script>
  import $ from 'jquery'
  import { get_hitokoto, get_home_images } from 'network/home'

  export default {
    name: 'Home',
    props: {
    },
    data(){
      return {
        hitokoto_data: {
          'hitokoto': '路漫漫其修远兮，吾将上下而求索。',
          'from': '屈原'
        },
        home_image_urls: [],
        home_image_index: 0,
      }
    },
    created(){
      this.get_hitokoto()
    },
    mounted(){
      this.get_home_images()
    },
    methods: {
      // 获取一言堂数据
      get_hitokoto() {
        get_hitokoto().then(res => {
          if(res.status == 200){
            this.hitokoto_data.hitokoto = res.data.hitokoto
            this.hitokoto_data.from = res.data.from
          }
        }).catch((error) => {
            console.log('获取一言堂数据失败：' + error)
        })
      },
      // 获取首页图片数据
      get_home_images() {
        this.home_image_urls = JSON.parse(sessionStorage.getItem("home_image_urls"))
        this.home_image_index = parseInt(sessionStorage.getItem("home_image_index"))
        if(isNaN(this.home_image_index)){ 
          this.home_image_index = 0
        }
        if(this.home_image_urls == null){
          this.home_image_urls = new Array()
          get_home_images().then(res => {
            if(res.status == 200){
              console.log(res)
              const images = res.data.images;
              for (let i = 0; i < images.length; i++) {
                const item = images[i]
                this.home_image_urls.push(item.url)
              }
              const url = "https://www.bing.com"+ this.home_image_urls[this.home_image_index]
              // const url = "https://cn.bing.com/"+ this.home_image_urls[this.home_image_index]
              this.$refs.panel.style.background = "url('"+url+"') center center no-repeat #666"
              sessionStorage.setItem("home_image_urls",JSON.stringify(this.home_image_urls))
              sessionStorage.setItem("home_image_index", this.home_image_index)
            }})
        }else{
          if(this.home_image_index == 7) { 
            this.home_image_index = 0 
          }else { 
            this.home_image_index ++ 
          }
          const url = "https://www.bing.com"+ this.home_image_urls[this.home_image_index]
          this.$refs.panel.style.background = "url('"+url+"') center center no-repeat #666"
          sessionStorage.setItem("home_image_index", this.home_image_index)
        }
      },
      // 路由跳转
      route_redirect_replace(path){
        this.$router.replace(path)
      },
    }
  }

  let iUp = (function () {
    let t = 0, d = 150,
    clean = function () {
      t = 0;
    },
    up = function (e) {
      setTimeout(function () {
        $(e).addClass("up")
      }, t);
      t += d;
    },
    down = function (e) {
      $(e).removeClass("up");
    },
    toggle = function (e) {
      setTimeout(function () {
        $(e).toggleClass("up")
      }, t);
      t += d;
    };
  return {
    clean: clean,
    up: up,
    down: down,
    toggle: toggle
  }
  })();

  $(document).ready(function () {
    $(".iUp").each(function (i, e) {
      iUp.up(e);
    });

    $(".js-avatar")[0].onload = function () {
      $(".js-avatar").addClass("show");
    }
  });

</script>

<style scoped>
  @import "~assets/css/iconfont.css";
  @import "~assets/css/home/vno.css";
</style>
